/* eslint-disable prettier/prettier */
import {
  FormInst,
  NForm,
  NFormItem,
  NInput,
  NModal,
  NSelect,
  NSpace,
  useMessage
} from 'naive-ui'
import { defineComponent, ref, watchEffect } from 'vue'
import styles from './index.module.scss'
import { SelectOptionsType } from '@/views/system/role/types'
import { roleForm } from '@/service/modules/system-role'

const props = {
  propModal: {
    // @ts-ignore
    type: Boolean,
    default: true
  },
  value: {
    // @ts-ignore
    type: Boolean,
    default: false
  },
  itemData: {
    // @ts-ignore
    type: Object,
    default() {
      return {}
    }
  }
}

const info = defineComponent({
  name: 'info',
  props,
  emits: ['closeModal'],
  // @ts-ignore
  setup(props, { emit }) {
    const infoForm = ref({
      menuType: undefined,
      menuName: '',
      parentId: undefined,
      path: '',
      query: '',
      perms: '',
      status: undefined,
      remark: ''
    })

    const rules = {
      menuType: { required: true, message: '请输入菜单类型', trigger: 'blur' },
      menuName: { required: true, message: '请输入菜单名称', trigger: 'blur' },
      path: { required: true, message: '请输入路由地址', trigger: 'blur' },
      query: { required: true, message: '请输入路由参数', trigger: 'blur' },
      perms: { required: true, message: '请输入权限标识', trigger: 'blur' }
    }

    const message = useMessage()

    const infoSubmit = function () {
      infoFormRef.value?.validate((err) => {
        if (!err) {
          roleForm(infoForm.value)
            .then((res: any) => {
              message.success(res.msg ? res.msg : '创建成功')
              emit('closeModal')
            })
            .catch((err: any) => {
              message.error(err.msg ? err.msg : '接口未知错误')
            })
        }
      })
    }

    const infoFormRef = ref<FormInst | null>(null)

    const onCloseModal = function () {
      emit('closeModal', true)
    }

    // @ts-ignore
    const statusOptions: SelectOptionsType = ['启用', '禁用'].map(
      (item: string, index: number) => {
        return {
          label: item,
          value: index
        }
      }
    )

    const DataScopeOptions = {
      '1': '全部数据权限',
      '2': '本人数据权限',
      '3': '本部门数据权限',
      '4': '本部门及以下数据权限'
    }

    const dataScopeOptions = ref([])

    for (const dataScopeOptionsKey in DataScopeOptions) {
      // @ts-ignore
      dataScopeOptions.value.push({
        // @ts-ignore
        label: DataScopeOptions[dataScopeOptionsKey],
        // @ts-ignore
        value: dataScopeOptionsKey
      })
    }

    const menuOptions = [
      {
        label: 'Rubber Soul',
        key: 'Rubber Soul'
      }
    ]

    const handleUpdateValue = function () {}

    const menuTypeOptions = ref([])

    const MenuTypeOptions = {
      M: '目录',
      C: '菜单',
      F: '按钮'
    }

    for (const menuTypeOptionsKey in MenuTypeOptions) {
      // @ts-ignore
      menuTypeOptions.value.push({
        // @ts-ignore
        label: MenuTypeOptions[menuTypeOptionsKey],
        // @ts-ignore
        value: menuTypeOptionsKey
      })
    }

    watchEffect(() => {
      // @ts-ignore
      infoForm.value = props.itemData
    })

    return {
      infoForm,
      rules,
      infoSubmit,
      infoFormRef,
      message,
      onCloseModal,
      statusOptions,
      dataScopeOptions,
      menuOptions,
      handleUpdateValue,
      menuTypeOptions
    }
  },
  render() {
    return (
      <NSpace vertical>
        <NModal
          v-model:show={this.$props.propModal}
          preset='card'
          class={styles['modal-hive']}
          title='详情'
          size='huge'
          bordered={false}
          on-close={this.onCloseModal}
        >
          <NForm
            model={this.infoForm}
            rules={this.rules}
            label-placement='left'
            ref='infoFormRef'
            disabled
          >
            <NFormItem label='菜单类型' label-width='120px' path='menuType'>
              <NSelect
                v-model:value={this.infoForm.menuType}
                placeholder='请选择菜单类型'
                // @ts-ignore
                options={this.menuTypeOptions}
              ></NSelect>
            </NFormItem>
            <NFormItem label='菜单名称' label-width='120px' path='menuName'>
              <NInput
                v-model:value={this.infoForm.menuName}
                placeholder='请输入菜单名称'
              ></NInput>
            </NFormItem>
            <NFormItem label='上级菜单' label-width='120px' path='menuType'>
              <NSelect
                v-model:value={this.infoForm.parentId}
                placeholder='请选择上级菜单'
                // @ts-ignore
                options={this.menuTypeOptions}
              ></NSelect>
            </NFormItem>
            <NFormItem label='路由地址' label-width='120px' path='path'>
              <NInput
                v-model:value={this.infoForm.path}
                placeholder='请输入路由地址'
              ></NInput>
            </NFormItem>
            <NFormItem label='路由参数' label-width='120px' path='query'>
              <NInput
                v-model:value={this.infoForm.query}
                placeholder='请输入路由参数'
              ></NInput>
            </NFormItem>
            <NFormItem label='路由标识' label-width='120px' path='perms'>
              <NInput
                v-model:value={this.infoForm.perms}
                placeholder='请输入路由标识'
              ></NInput>
            </NFormItem>
            <NFormItem label='状态' label-width='120px' path='status'>
              <NSelect
                v-model:value={this.infoForm.status}
                placeholder='请选择状态'
                // @ts-ignore
                options={this.statusOptions}
              ></NSelect>
            </NFormItem>
            <NFormItem label='备注' label-width='120px' path='remark'>
              <NInput
                v-model:value={this.infoForm.remark}
                placeholder='请输入备注'
              ></NInput>
            </NFormItem>
          </NForm>
        </NModal>
      </NSpace>
    )
  }
})

export default info
